<template>
  <div>
    <!-- 控制拖拽区显示的按钮 -->
    <div style="width: 100%; margin-bottom: 20px;">
      <el-button type="primary" @click="showDraggable = !showDraggable">
        {{ showDraggable ? '隐藏拖拽排序' : '显示拖拽排序' }}
      </el-button>
    </div>

    <!-- 上传组件 -->
    <div class="upLoadImageBox">
      <el-upload
        :file-list="uploadFileList"
        :http-request="httpRequest"
        :limit="limit"
        list-type="picture-card"
        @remove="handleRemove"
      >
        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </div>

    <!-- 拖拽区域 -->
    <div class="draggable-box">
      <draggable
        v-if="showDraggable"
        v-model="uploadFileList"
        item-key="url"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @end="onEnd"
        class="box-img-flex-box"
      >
        <template #item="{ element }">
          <div class="shopImgBox">
            <img :src="element.url" class="avatar" />
            <span class="seq-badge">顺序: {{ element.seq }}</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from "vue";
import { UploadRequestOptions } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { uploadShopPicture } from "@/api/meal";
import { compressImageToBase64 } from "@/utils/file";
import draggable from "vuedraggable";

interface Picture {
  seq: number;
  url: string;
}

const props = defineProps<{
  modelValue: Picture[];
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: Picture[]): void;
}>();

// 用于el-upload组件的文件列表
const uploadFileList = computed({
  get: () => props.modelValue.map(pic => ({
    name: pic.url.split('/').pop() || 'image',
    url: pic.url,
    seq: pic.seq
  })),
  set: (newVal) => {
    emit("update:modelValue", newVal.map((file, index) => ({
      seq: index + 1,
      url: file.url
    })));
  }
});

const showDraggable = ref(false);
const limit = 9;

// 处理图片删除
function handleRemove(file: { url: string }) {
  const newList = uploadFileList.value.filter(item => item.url !== file.url);
  uploadFileList.value = newList;
}

// 自定义上传请求
async function httpRequest(options: UploadRequestOptions) {
  try {
    const compressed = await compressImageToBase64(options.file);
    const base64Data = String(compressed).split(",")[1];
    const { result } = await uploadShopPicture(base64Data, options.file.name);

    if (result) {
      const newList = [
        ...uploadFileList.value,
        {
          name: options.file.name,
          url: result,
          seq: uploadFileList.value.length + 1
        }
      ];
      uploadFileList.value = newList;
    }
  } catch (error) {
    console.error(error);
  }
}

// 拖拽结束处理
function onEnd() {
  // 自动通过计算属性的setter更新顺序
  console.log("当前图片顺序：", uploadFileList.value);
}
</script>



<style>
.upLoadImageBox {
  width: 600px;
}

.draggable-box {
  width: 400px;
}

/* 添加一些样式以确保拖拽区域的显示效果 */
.box-img-flex-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.shopImgBox {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fafafa;
  transition: border-color 0.3s, background-color 0.3s;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>